<template>
  <div class="app-container">
    <el-card style="width: 100%">
      <el-row
        style="margin: 5px 0px"
        type="flex"
        justify="space-around">
        <el-col :span="12">
          <el-button
            type="primary"
            size="medium"
            icon="el-icon-plus"
            @click="activateTheProductAction()">
            新增
          </el-button>
        </el-col>
        <el-col
          :span="12"
          style="text-align: right"></el-col>
      </el-row>

      <table-list
        ref="tableList"
        :fields="tableDataColumn"
        :pagination="true"
        :searchFunc="getUserProductList"
        border></table-list>
    </el-card>
  </div>
</template>
<script>
import Add from '@/views/user/product/add';
import Config from '@/views/user/product/components/config';
import { getUserProductList, getList as getUserList } from '@/api/user';
import { getList as getProductList } from '@/api/product';
import TableList from '@/components/TableList/index';
export default {
  name: 'list',
  components: {
    TableList,
  },
  data() {
    return {
      getUserProductList,
      tableDataColumn: [
        {
          prop: 'id',
          searchName: 'id',
          label: 'ID',
          minWidth: '60',
          searchType: 'input',
          exact: true,
        },
        {
          prop: 'product_key',
          searchName: 'product_key',
          label: '序列号',
          minWidth: '80',
          searchType: 'input',
          exact: true,
        },
        {
          prop: 'user.nick_name',
          searchName: 'user_id',
          label: '用户',
          minWidth: '120',
          searchType: 'remoteSelect',
          searchAction: getUserList,
          searchKey: 'id',
          searchLabel: 'nick_name',
          exact: true,
        },
        {
          prop: 'product.product_name',
          searchName: 'product_id',
          label: '产品名称',
          minWidth: '180',
          searchType: 'remoteSelect',
          searchAction: getProductList,
          searchKey: 'id',
          searchLabel: 'category_name',
          exact: true,
        },
        {
          prop: 'product.product_no',
          searchName: 'product_id',
          label: '产品编号',
          minWidth: '180',
          searchField: false,
        },
        {
          prop: 'unit_price',
          searchName: 'unit_price',
          label: '单价',
          minWidth: '100',
          searchType: 'input',
          exact: true,
        },
        {
          prop: 'request_number',
          searchName: 'request_number',
          label: '请求数量',
          minWidth: '100'
        },
        {
          prop: 'charge_number',
          searchName: 'charge_number',
          label: '扣费数量',
          minWidth: '100'
        },
        {
          prop: 'remark',
          searchName: 'remark',
          label: '备注',
          minWidth: '160',
          searchType: 'input',
        },
        {
          prop: 'created_at',
          searchName: 'created_at',
          label: '创建时间',
          minWidth: '180',
          searchType: 'dateTime',
        },
        {
          label: '操作',
          searchField: false,
          render: (h, scope) => {
            return (
              <div>
                <el-button
                  size='mini'
                  type='text'
                  onClick={() => {
                    this.editUserProductAction(scope.row);
                  }}>
                  编辑
                </el-button>
                <el-button
                  size='mini'
                  type='text'
                  onClick={() => {
                    this.editProductConfigAction(scope.row);
                  }}>
                  配置通道
                </el-button>
              </div>
            );
          },
          fixed: 'right',
          minWidth: '160',
        },
      ],
    };
  },
  created() {},
  methods: {
    activateTheProductAction() {
      this.setUserProduct(0);
    },
    editUserProductAction(row) {
      this.setUserProduct(row.id);
    },
    setUserProduct(userProductId) {
      this.$createDialog({
        title: '编辑产品',
        component: Add,
        props: {
          userProductId: userProductId,
        },
        buttons: [{ text: '确定', callback: 'handleSubmit', name: 'submit' }],
      });
    },
    editProductConfigAction(row){
      this.$createDialog({
        title: '配置',
        component: Config,
        props: {
          userProductId: row.id,
        },
        buttons: [{ text: '确定', callback: 'handleSubmit', name: 'submit' }],
      });
    }
  },
};
</script>
